<template>
  <div class="wrap" id="BIZ">
    <el-dialog
      title="历史明细"
      :visible.sync="state"
      @close="close"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @open="open"
    >
      <div class="flex">
        <p>名称:{{cusId.username}}</p>
        <div class="block">
          <el-date-picker
            v-model="value2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期1"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="setTime2"
          ></el-date-picker>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%"  height="350">
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="customer_total" label="今日取货单数"></el-table-column>
        <el-table-column prop="proxy_total" label="今日代发数"></el-table-column>
        <el-table-column prop="supplier_biz_total" label="今日送货商家数"></el-table-column>
        <el-table-column prop="supplier_total" label="今日送货单数"></el-table-column>
        <el-table-column prop="customer_biz_total" label="	今日取货商家数"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="close(1)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { customerOrderHistory } from "@/utils/interface";
export default {
  props: {
    cusState: {
      type: Boolean,
      default: false
    },
    cusId: {
      type: null,
      default: ""
    }
  },
  data() {
    return {
      tableData: [],
      value2: []
    };
  },
  computed: {
    state: {
      get() {
        return this.cusState;
      },
      set() {}
    }
  },
  methods: {
    close(v) {
      this.$emit("showInfoCusData");
    },
    open() {
      this.getData();
    },
    setTime2(e) {
      if (e) {
        this.getData(e[0], e[1]);
      } else {
        this.getData();
      }
    },
    getData(startTime, endTime) {
      customerOrderHistory({ account: this.cusId.account, startTime, endTime }).then(
        res => {
          console.log(res.data.data);
          this.tableData = res.data.data;
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 240px;
}
.el-dialog {
  width: 50% !important;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -30px;
  margin-bottom: 15px;
  p {
    font-size: 18px;
    font-weight: 600;
  }
}
</style>
<style lang="scss">
#BIZ .el-dialog {
  width: 50% !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>